<template>
  <div class="box">
    <el-card class="box-card">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="value">
          <el-select
            v-model="titleValue"
            class="m-2"
            placeholder="请选择"
            size="large"
          >
            <el-option
              v-for="item in menuData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="前端名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            type="text"
            autocomplete="off"
            :disabled="htmlName"
          />
        </el-form-item>
        <el-form-item label="前端图标" prop="icon">
          <el-input
            v-model="ruleForm.icon"
            type="text"
            autocomplete="off"
            :disabled="htmlIcon"
          />
        </el-form-item>
        <el-form-item label="是否显示" prop="hidden">
          <el-radio-group v-model="ruleForm.hidden">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="ruleForm.sort" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { reactive, ref } from "vue";
import {
  pagingGetMenuListApi,
  addMenuApi,
  updateMenuApi,
  getMenuDataApi,
} from "./api/api";
import type { FormInstance } from "element-plus";

const menuData = ref<{ label: string; value: string }[]>([]);
const ruleFormRef = ref<FormInstance>();
const htmlName = ref(false);
const htmlIcon = ref(false);
const titleValue = ref("");
const ruleForm = reactive({
  title: "",
  hidden: 1,
  icon: "",
  name: "",
  sort: "",
  parentId: 0,
});
const route = useRoute();
// console.log(route.query.id);

if (route.query.id) {
  console.log("id发生了变化");
  //   updateMenuApi(route.query.id,ruleForm)
  getMenuDataApi(parseInt(route.query.id as string)).then((res) => {
    // console.log(res);
    if (res.code === 200) {
      Object.assign(ruleForm, res.data);
      titleValue.value = res.data.title;
      htmlIcon.value = true;
      htmlName.value = true;
    }
  });
}

const rules = reactive({
  title: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
  name: [{ required: true, message: "前端名称不能为空", trigger: "blur" }],
});
const router = useRouter();
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("校验成功,发送请求!");
      if (!route.query.id) {
        addMenuApi(ruleForm).then((res) => {
          if (res.code === 200) {
            router.push("/ums/menu");
            console.log("请求的结果", res);
          }
        });
      } else {
        updateMenuApi(parseInt(route.query.id as string), ruleForm).then(
          (res) => {
            console.log(res);
            if (res.code === 200) {
              router.push("/ums/menu");
            }
          }
        );
      }
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const queryParams = reactive<IUserListParams>({
  pageNum: 1,
  pageSize: 1000,
});
pagingGetMenuListApi(0, queryParams).then((res) => {
  console.log(res);
  menuData.value = res.data.list.map((item) => {
    return {
      label: item.title,
      value: item.title,
    };
  });
  menuData.value.unshift({
    label: "无上级菜单",
    value: "无上级菜单",
  });
  //   console.log(menuData.value);
});
</script>
<style lang="less" scoped>
.box {
  margin-top: 30px;
}
</style>
